import 'package:dmz/base/pageWidget/base_stateful_widget.dart';
import 'package:dmz/base/widget/defult_widget.dart';
import 'package:dmz/business/home/model/locus_data.dart';
import 'package:dmz/business/home/model/run_message.dart';
import 'package:dmz/business/home/widgets/date_select_widget.dart';
import 'package:dmz/business/home/widgets/shanre_details_widgets.dart';
import 'package:dmz/utils/sp_utils.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';

class RunMessageWidgets {
  static Widget topBarWidget(int slselctType, Function(int) click) {
    item(title, int type, bool select) {
      return Expanded(
          child: Container(
              child: Column(children: [
        Container(
            color: Colors.transparent,
            alignment: Alignment.center,
            height: 120.sp,
            child: DefaultText(title, select ? 40.sp : 28.sp,
                textColor:
                    select ? const Color(0xFF23C565) : const Color(0xFF999999),
                fontWeight: select ? FontWeight.w700 : FontWeight.normal)),
        Container(
            height: 5.sp,
            color: select ? const Color(0xFF23C565) : const Color(0xFF999999))
      ])).addGestureDetector(() => click(type)));
    }

    return Container(
        color: const Color(0xFF434650),
        child: Row(children: [
          item('骑行统计'.tr, 0, slselctType == 0),
          item('轨迹列表'.tr, 1, slselctType == 1)
        ]));
  }

  ///当前车况
  static conuntTopWidget(RunMessageModel data) {
    item(title, unit, dataNum) {
      return Container(
          height: 254.sp,
          constraints: BoxConstraints(
            minWidth: 250.sp,
          ),
          child: Column(mainAxisAlignment: MainAxisAlignment.center, children: [
            Row(children: [
              DefaultText('$dataNum', 72.sp,
                  textColor: const Color(0xFFF9F9F9),
                  fontWeight: FontWeight.w700),
              DefaultText(unit, 32.sp, textColor: const Color(0xFFF9F9F9))
                  .marginOnly(top: 25.sp),
            ]),
            DefaultText(title, 28.sp, textColor: const Color(0xFF999999))
          ]));
    }

    line() {
      return Container(
          width: 2.sp, height: 158.sp, color: const Color(0xFFF9F9F9));
    }

    return Container(
        margin: EdgeInsets.only(top: 3.sp),
        color: const Color(0xFF434650),
        child: Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
          DefaultText('当前车况'.tr, 40.sp, textColor: const Color(0xFFF9F9F9))
              .marginOnly(left: 32.sp, top: 48.sp),
          Row(mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [
            item('累计里程'.tr, 'km', data.total_mileage),
            line(),
            item('单次最长里程'.tr, 'km', data.max_ride_mileage),
            line(),
            item('陪伴时间'.tr, '天'.tr, data.accompany_days)
          ])
        ]));
  }

  ///近15天数据
  static conuntMidleWidget(RunMessageModel data) {
    item(title, unit, dataNum) {
      return Container(
          padding: EdgeInsets.only(left: 74.sp),
          color: const Color(0xFF434650),
          width: 366.sp,
          height: 226.sp,
          child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              mainAxisSize: MainAxisSize.min,
              children: [
                Row(children: [
                  Container(
                          height: 42.sp,
                          color: const Color(0xFF23C565),
                          width: 4.sp)
                      .marginOnly(right: 20.sp),
                  DefaultText(title, 28.sp, textColor: const Color(0xFFF9F9F9)),
                ]),
                Row(children: [
                  DefaultText('${dataNum ?? ''}', 72.sp,
                      textColor: const Color(0xFFF9F9F9),
                      fontWeight: FontWeight.w700),
                  DefaultText(unit, 32.sp, textColor: const Color(0xFFF9F9F9))
                      .marginOnly(top: 25.sp),
                ]),
              ])).didClipRRectAll(56.sp);
    }

    return Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        mainAxisSize: MainAxisSize.min,
        children: [
          DefaultText('近15天数据'.tr, 40.sp, textColor: const Color(0xB3FFFFFF))
              .marginOnly(left: 32.sp, top: 42.sp),
          Row(mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [
            item('累计骑行里程'.tr, 'km', data.accumulated_mileage),
            item('最高时速'.tr, 'km/h', data.max_speed)
          ]).marginOnly(left: 32.sp, right: 32.sp, bottom: 32.sp, top: 42.sp),
          Row(mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [
            item('平均时速'.tr, 'km/h', data.avg_speed),
            item('骑行次数'.tr, '次', data.cycling_count)
          ]).marginOnly(left: 32.sp, right: 32.sp)
        ]);
  }

  ///数据统计表
  static runMessageStatisticsTable(
      RunMessageModel data, ScrollController controller) {
    return data.maxNum == null
        ? const SizedBox()
        : Stack(children: [
            Container(
                color: Colors.transparent,
                padding: EdgeInsets.only(left: 90.sp),
                child: Column(children: [
                  Container(
                      color: Colors.transparent,
                      alignment: Alignment.bottomCenter,
                      height: 420.sp,
                      child: ListView(
                          controller: controller,
                          scrollDirection: Axis.horizontal,
                          children:
                              List.generate(data.dateList.length, (index) {
                            double height = 0;
                            var datas = data.mileage_statics?.where((element) =>
                                element['day'] == data.dateList[index]);
                            // debugPrint('统计数据 ---- ${data.dateList}');
                            if (datas!.isNotEmpty) {
                              height = (datas.first['mileage'] ?? 0) /
                                  1000 /
                                  data.maxNum! *
                                  300.sp;
                            }
                            //x轴 内容 文字
                            return Container(
                                padding: EdgeInsets.only(right: 20.sp),
                                alignment: Alignment.bottomCenter,
                                child: Column(
                                    mainAxisAlignment: MainAxisAlignment.end,
                                    children: [
                                      Container(
                                        padding: EdgeInsets.only(right: 10.sp),
                                        width: 40.sp,
                                        height: height,
                                        color: const Color(0xFF23C565),
                                      ),
                                      DefaultText(
                                              data.dateOtherList[index], 28.sp,
                                              textColor:
                                                  const Color(0xFF999999))
                                          .marginOnly(top: 13.sp)
                                    ]));
                          }))),
                ])),
            //y轴 文字
            Positioned(
                child: Container(
                    color: Colors.transparent,
                    height: 390.sp,
                    width: 80.sp,
                    child: Column(
                        crossAxisAlignment: CrossAxisAlignment.end,
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: List.generate(
                            5,
                            (index) => DefaultText(
                                  '${((4 - index) * ((data.maxNum ?? 20) / 4)).toInt()}km',
                                  28.sp,
                                  textColor: const Color(0xFF999999),
                                ))))),
            //y轴
            Positioned(
                left: 90.sp,
                bottom: 50.sp,
                child: Container(
                  height: 400.sp,
                  width: 4.sp,
                  color: const Color(0xFF23C565),
                )),
            //x轴
            Positioned(
                left: 90.sp,
                bottom: 50.sp,
                child: Container(
                  height: 4.sp,
                  width: 900.sp,
                  color: const Color(0xFF23C565),
                ))
          ]).marginOnly(left: 32.sp, right: 32.sp, top: 110.sp);
  }

  ///页面日期选择
  static selectDateTopWidget(String dateStr, Function click) {
    return Container(
        margin: EdgeInsets.only(top: 3.sp),
        padding: EdgeInsets.only(
            top: 48.sp, bottom: 48.sp, left: 32.sp, right: 32.sp),
        color: const Color(0xFF434650),
        child: Row(children: [
          DefaultText('日期选择'.tr, 40.sp,
              textColor: const Color(0xFFF9F9F9), fontWeight: FontWeight.w700),
          const Expanded(child: SizedBox()),
          DefaultText(dateStr, 32.sp, textColor: const Color(0xFFF9F9F9))
              .marginOnly(right: 20.sp),
          Image.asset('assets/images/home/main/date_icon.png',
              width: 18.sp, height: 30.sp)
        ])).addGestureDetector(() => click());
  }

  static Widget contentItem(title, dataNum, unit, {double? right}) {
    return Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
      DefaultText(title, 28.sp, textColor: const Color(0xFF999999)),
      Row(children: [
        DefaultText('${dataNum ?? ''}', 72.sp,
            textColor: const Color(0xFFF9F9F9), fontWeight: FontWeight.w700),
        DefaultText(unit, 32.sp, textColor: const Color(0xFFF9F9F9))
            .marginOnly(top: 25.sp),
      ]),
    ]).marginOnly(right: right ?? 48.sp);
  }

  static Widget icon(bool showColor) {
    return Container(
        width: 33.sp,
        height: 33.sp,
        decoration: BoxDecoration(
            color: showColor ? const Color(0xFF23C565) : Colors.transparent,
            border: Border.all(color: const Color(0xFF23C565), width: 2.0),
            borderRadius: BorderRadius.all(Radius.circular(33.sp))));
  }

  static Widget locusListWidget(
      LocusPageData locusPageData, Function(LocusModle) click) {
    item(LocusModle data) {
      return Container(
              color: const Color(0xFF434650),
              padding: EdgeInsets.only(left: 32.sp, right: 32.sp, top: 48.sp),
              child: Column(children: [
                Row(crossAxisAlignment: CrossAxisAlignment.start, children: [
                  Container(
                      width: 140.sp,
                      child: DefaultText(
                          '${SPUtils.timeIntToTimeStr(data.start_time ?? 0, attern: 'HH:mm')}',
                          40.sp,
                          textColor: const Color(0xFFF9F9F9),
                          fontWeight: FontWeight.w700)),
                  Column(mainAxisSize: MainAxisSize.min, children: [
                    icon(true).marginOnly(top: 15.sp),
                    Container(
                        width: 3.sp,
                        height: 210.sp,
                        child:
                            CustomPaint(painter: VerticalDashedLinePainter())),
                    icon(false)
                  ]).marginOnly(right: 32.sp),
                  Expanded(
                      child: Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                        DefaultText('起点地址'.tr, 40.sp,
                            textColor: const Color(0xFFF9F9F9)),
                        Container(
                            height: 190.sp,
                            child: DefaultText('${data.start_name}', 28.sp,
                                textColor: const Color(0xFFBEBEBE))),
                        DefaultText('终点地址'.tr, 40.sp,
                            textColor: const Color(0xFFF9F9F9)),
                        DefaultText('${data.end_name}', 28.sp,
                            textColor: const Color(0xFFBEBEBE)),
                      ])),
                ]),
                Container(height: 2.sp, color: const Color(0xFFF9F9F9))
                    .marginOnly(top: 40.sp, bottom: 40.sp),
                Row(children: [
                  contentItem('行驶里程数'.tr, data.mileage! / 1000, 'km'),
                  contentItem(
                      '花费时长'.tr,
                      '${SPUtils.timestampDifference(data.start_time!, data.end_time!).inMinutes}',
                      'min'),
                  contentItem('平均速度'.tr, data.avg_speed, 'km/h', right: 0),
                  const Expanded(child: SizedBox()),
                  Image.asset('assets/images/home/set/locus_icon.png',
                          width: 128.sp, height: 128.sp)
                      .addGestureDetector(() => click(data))
                ]).marginOnly(bottom: 56.sp)
              ]))
          .didClipRRectAll(56.sp)
          .marginOnly(left: 32.sp, right: 32.sp, bottom: 32.sp, top: 48.sp);
    }

    return ListView.builder(
        itemCount: locusPageData.list?.length ?? 0,
        itemBuilder: (context, index) {
          return item(locusPageData.list![index]);
        });
  }

  ///日期选择窗口页面
  static seleDateWheelWidget(String dateStr, Function(String) finished) {
    return ShareDetailsWidgets.widowBackWidget(
        '选择日期'.tr,
        Column(children: [
          DateSelectWidget(selectNow: dateStr, finished: finished),
        ]));
  }

  ///轨迹地图页面底部说明
  static locusMapBottomWidget(String imageaUrl, LocusModle data) {
    Widget line() {
      return Container(
        height: 2.sp,
        color: Color(0xFFD8D8D8),
      );
    }

    return Container(
        padding: EdgeInsets.only(left: 64.sp, right: 64.sp, top: 36.sp),
        decoration: BoxDecoration(
          borderRadius: BorderRadius.only(
            topLeft: Radius.circular(60.sp),
            topRight: Radius.circular(60.sp),
          ),
          color: const Color(0xFF434650),
        ),
        child: Column(mainAxisSize: MainAxisSize.min, children: [
          Row(children: [
            DefaultNetWorkImage(imageaUrl, width: 140.sp, height: 110.sp),
            DefaultText(
                SPUtils.timeIntToTimeStr(data.start_time ?? 0,
                    attern: 'yyyy-MM-dd HH:mm'),
                44.sp,
                textColor: Color(0xFFF9F9F9))
          ]).marginOnly(bottom: 32.sp),
          line(),
          Row(crossAxisAlignment: CrossAxisAlignment.start, children: [
            Column(mainAxisSize: MainAxisSize.min, children: [
              icon(true).marginOnly(top: 15.sp),
              Container(
                  width: 3.sp,
                  height: 210.sp,
                  child: CustomPaint(painter: VerticalDashedLinePainter())),
              icon(false)
            ]).marginOnly(right: 32.sp),
            Expanded(
                child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    mainAxisSize: MainAxisSize.min,
                    children: [
                  DefaultText('起点地址'.tr, 40.sp,
                      textColor: const Color(0xFFF9F9F9)),
                  Container(
                      height: 190.sp,
                      child: DefaultText('${data.start_name}', 28.sp,
                          textColor: const Color(0xFFBEBEBE))),
                  DefaultText('终点地址'.tr, 40.sp,
                      textColor: const Color(0xFFF9F9F9)),
                  DefaultText('${data.end_name}', 28.sp,
                      textColor: const Color(0xFFBEBEBE)),
                ]))
          ]).marginOnly(top: 90.sp, bottom: 40.sp),
          line(),
          Row(children: [
            contentItem('行驶里程数'.tr, data.mileage! / 1000, 'km'),
            contentItem(
                '花费时长'.tr,
                '${SPUtils.timestampDifference(data.start_time!, data.end_time!).inMinutes}',
                'min'),
            contentItem('平均速度'.tr, data.avg_speed, 'km/h', right: 0),
          ]).marginOnly(top: 32.sp, bottom: 52.sp)
        ]));
  }
}

///横向虚线
class DashedLinePainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    double dashWidth = 5.0, dashSpace = 3.0;
    final paint = Paint()
      ..color = Colors.black
      ..strokeWidth = 2.0;

    double startX = 0;
    while (startX < size.width) {
      canvas.drawLine(Offset(startX, 0), Offset(startX + dashWidth, 0), paint);
      startX += dashWidth + dashSpace;
    }
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) => false;
}

///纵向虚线
class VerticalDashedLinePainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    double dashHeight = 5.0, dashSpace = 3.0;
    final paint = Paint()
      ..color = const Color(0xFF23C565)
      ..strokeWidth = 2.0;

    double startY = 0;
    while (startY < size.height) {
      canvas.drawLine(Offset(0, startY), Offset(0, startY + dashHeight), paint);
      startY += dashHeight + dashSpace;
    }
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) => false;
}
